<template>
  <div class="template-detail">
    <el-dialog
      width="60%"
      :visible.sync="formShow"
      @close="handleClickDeal('cancel')"
      v-dialog-drag
      append-to-body
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <span slot="title">
        <i class="iconfont icon-biangeng"></i>
        <span>监控设备清单</span>
      </span>

      <div class="g-dialog-scroll">
        <div class="dialog-btn-group">
          <el-select
            style="width:180px;margin-right:10px;"
            size="small"
            v-model="search.isPerfect"
            placeholder="选择是否完善"
          >
            <el-option
              v-for="item in isPerfectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            size="small"
            style="width:180px;margin-right:10px;"
            v-model="search.cameraTypeName"
            placeholder="选择设备类型"
          >
            <el-option
              v-for="item in cameraTypeNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-model="search.newCameraName"
            style="width:180px;margin-right:10px;"
            size="small"
            placeholder=""
          ></el-input>
          <el-button type="primary" size="small" @click="getList">搜索</el-button>
        </div>
        <div>
          <el-table
            ref="table"
            :header-cell-style="{
              textAlign: 'center',
              padding: '8px 0',
              backgroundColor: '#f2f2f2',
              borderColor: '#d4d4d4'
            }"
            :cell-style="{ padding: '6px 0', borderColor: '#d4d4d4' }"
            border
            style="width: 100%;margin-bottom:30px;margin-top:20px;"
            :data="buildUnitTable"
          >
            <el-table-column
              label="设备名称"
              show-overflow-tooltip
              align="center"
              width="150"
              prop="cameraName"
            >
            </el-table-column>
            <el-table-column
              label="设备类型"
              show-overflow-tooltip
              align="center"
              width="80"
							prop="cameraTypeName"
            >
            </el-table-column>
            <el-table-column
              label="区域"
              show-overflow-tooltip
              align="center"
              width="150"
							prop="path"
            >
            </el-table-column>
            <el-table-column
              label="所属合同段"
              show-overflow-tooltip
              align="center"
              width="200"
              prop="sectionName"
            >
              <template slot-scope="scope">
								<el-popover
									placement="top"
									width="400"
									trigger="click">
									<el-tree
										:data="treeData"
										:props="defaultProps"
										accordion
										@node-click="(data, node, item) => handleNodeClick(data, node, item, scope.row)">
									</el-tree>
<!--								<el-button slot="reference" size="small">{{scope.row.sectionId}}</el-button>-->
								<el-input v-model="scope.row.sectionName" slot="reference" size="small" placeholder="请输入"></el-input>
								</el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="设备重命名"
              show-overflow-tooltip
              align="center"
              width="200"
              prop="newCameraName"
            >
              <template slot-scope="scope">
                  <el-input v-model="scope.row.newCameraName" size="small" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="设备经度"
              show-overflow-tooltip
              align="center"
              prop="lnglat"
            >
            <template slot-scope="scope">
                  <el-input v-model="scope.row.longitude" size="small" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
						<el-table-column
							label="设备纬度"
							show-overflow-tooltip
							align="center"
							prop="lnglat"
						>
							<template slot-scope="scope">
								<el-input v-model="scope.row.latitude" size="small" placeholder="请输入"></el-input>
							</template>
						</el-table-column>
          </el-table>
           <el-pagination
            style="text-align: right; margin-top: 10px;"
            layout="prev, pager, next"
            :page-size="search.pageSize"
            :total="search.pageSum"
            :current-page="search.pageIndex + 1"
            :prev-text="tablePaginationPrev"
            :next-text="tablePaginationNext"
            @current-change="paginationChange"
      ></el-pagination>
        </div>
      </div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="resSubmitList">确定</el-button>
				<el-button size="small" @click="formShow = false">取消</el-button>
			</div>
    </el-dialog>
  </div>
</template>

<script>
import {tableCellStyleGol, tableHeaderCellStyleGol, tableRowStyleGol} from "@/utils/publicFun";

export default {
  name: 'video-map-detail',
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    async postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.actionType = value.typeName
			this.getList()
    }
  },
  data() {
    return {
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
			treeData: [],
			defaultIds:[],
      contractList: [],
			isPerfectList: [{
				id:'',
				value:'',
				label:"所有设备",
			},{
				id:0,
				value:0,
				label:"未完善信息的设备",
			}],
			cameraTypeNameList: [{
				id:'',
				value:'',
				label:"所有类型",
			},{
				id:'枪机',
				value:'枪机',
				label:"枪机",
			},{
				id:"快球",
				value:"快球",
				label:"快球",
			}],
      taskDefKey: '',
      taskName: '',
      actionType: '', //窗口类型
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      formShow: false, // 表单展示
      formlabelWidth: '140px', // 表单左侧标题宽度
      title: '方案论证',
      activeName: 'first',
      formBaseData: {
        title: '',
        fhMessage: '同意', //复核信息
        approveResult: '1', // 审批结论
        isChooseVice: '0', // 是否选择副经理
        viceLeaders: [], //副经理
        approveMessage: '审批通过' // 审批意见
      }, // 表单基本信息内容
      formBaseRules: {
        title: [
          { required: true, message: '请选择' + '审批结论', trigger: 'blur' }
        ]
      }, // 表单基本信息验证
      selectList: {
        list: [],
        viceLeaderList: [], //部门副经理
        proNameList: [] //项目名称
      },
      fileSystem: {
        sys: 'buss',
        module: 'schemedemonstration',
        entityClass: 'schemedemonstration',
        viewByAnon: true,
        longLife: false
      },
      search: {
        pageIndex: 0,
        pageSize: 10,
        pageSum: 0,
				newCameraName: '', //新摄像头名称
				cameraTypeName: '',//摄像头类型
				isPerfect: '',//是否完善
      }, // 搜索参数
      selectVal: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      postDetailData: {
        show: false,
        type: 'check'
      },
      buildUnitTable: [],
    }
  },
  created() {

	},
	mounted() {
		this.getTreeWithOutVideo()
	},
	methods: {
    refreshEvent(){
      this.$httpPost('/buss/video/getAllVideo', {})
      	.then((res) => {
					if (res.code === 200) {
            this.getList()
					}
				})
				.catch((res) => {
          console.log(res);
					this.$messageError(this.$route.name + '请求失败')
				})
    },
     //切换分页器
      paginationChange(index) {
        this.search.pageIndex = index - 1
        this.getList()
      },
		getTreeWithOutVideo(){
			this.$httpPost('/buss/video/getTreeWithOutVideo', {})
				.then((res) => {
					if (res.code === 200) {
						this.treeData = res.data
					}
				})
				.catch((res) => {
					this.$messageError(this.$route.name + '请求失败')
				})
		},
		getList(){
			this.$httpPost('/buss/video/listPage',
				this.search)
				.then((res) => {
					if (res.code === 200) {
						res.data.content.forEach(item =>{
							let sectionArr = []
							sectionArr.push(item.sectionId)
							item.sectionArr = sectionArr
						})
						this.buildUnitTable = res.data.content
            this.search.pageSum =  parseInt(res.data.totalElements)
					}
				})
				.catch((res) => {
					this.$messageError(this.$route.name + '请求失败')
				})
		},
		resSubmitList(){
			this.$httpPost('/buss/video/resSubmitList',
				this.buildUnitTable)
				.then((res) => {
					if (res.code === 200) {
						this.$messageSuccess('保存成功')
						this.getList()
					}
				})
				.catch((res) => {
					this.$messageError(this.$route.name + '请求失败')
				})
		},
		handleNodeClick(val,node,item,row) {
			this.$set(row,'sectionId',val.id)
			this.$set(row,'sectionName',val.name)
		},

    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 关闭弹窗
          this.formShow = false
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">
.dialog-btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
